<template>
  <!-- mapState使用： -->
  <h2>当前计数：{{ counter }}</h2>

  <!-- mapGetters使用： -->
  <h2>当前计数加倍：{{ doubleCounter }}</h2>
  <h2>{{ calCounter }}</h2>

  <!-- mapMutations使用： -->
  <button @click="decrement">-1</button>
  <button @click="increment">+1</button>
  <hr />

  <h3>延时一秒</h3>
  <!-- mapActions使用： -->
  <button @click="decrementAsyn">-1</button>
  <button @click="incrementAsyn">+1</button>

  <hr />
</template>

<script>
import { useState, useGetters } from "../hooks"
import { mapMutations, mapActions } from "vuex"

export default {
  setup() {
    //mapState使用
    const state = useState(["counter"])

    //mapGetters使用
    const getters = useGetters(["doubleCounter", "calCounter"])

    //mapMutations使用
    const mutations = mapMutations(["decrement", "increment"])

    //mapActions使用
    const actions = mapActions(["decrementAsyn", "incrementAsyn"])
    return {
      ...state,
      ...getters,
      ...mutations,
      ...actions,
    }
  },
}
</script>

<style></style>
